<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <div class="head-container" >
          <ColumnTree
            ref="columnSelect"
            :hasFilter="false"
            :datasourceId="id"
            :showCheckbox="showCheckbox"
            :isDimension="isDimension"
            @dragNode="handleDragNode"/>
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="head-container" @drop="drop"  @dragover.prevent>
          <DynamicTable ref="dynamicTable" :columnList="columnList"></DynamicTable>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import ColumnTree from '@/components/ColumnTree';
  import DynamicTable from '@/components/DynamicTable';
  export default {
    name: 'MetaTree',
    components: { ColumnTree, DynamicTable },
    data() {
      return {
        id: 236,
        allowDrop: false,
        //树结点是否显示checkbox
        showCheckbox: true,
        isDimension: '1',
        columnSelect: [],
        columnList: [],
        droppedItem: '',
        selectColumn: undefined
      }
    },
    methods: {
      drop(event){
        // 判断drop的来源是否为树，与表头的drag/drop事件做区分
        if(this.selectColumn) {
          this.columnList.push(this.selectColumn);
          this.selectColumn = undefined;
        }
      },
      handleDragNode(data){
        this.selectColumn = data;
      }
    }
  }
</script>

<style scoped>

</style>
